<div class="modal-add-form">
    <div nz-row [nzGutter]="24" class="data-row" >
        <div nz-col [nzSpan]="6" class="data-label">
            <span>角色名称</span>
        </div>
        <div nz-col [nzSpan]="18">
            <input class="data-content" nz-input disabled="true" [(ngModel)]="role.roleName" />
        </div>
    </div>

    <div nz-row [nzGutter]="24" class="data-row">
        <div nz-col [nzSpan]="6" class="data-label">
            <span>权限字符</span>
        </div>
        <div nz-col [nzSpan]="18" class="data-content">
            <input class="data-content" nz-input disabled="true" [(ngModel)]="role.roleKey" />
        </div>
    </div>

    <div nz-row [nzGutter]="24" class="data-row">
        <div nz-col [nzSpan]="6" class="data-label">
            <span nz-icon nzType="exclamation" nzTheme="outline" style="color: red;"></span>
            <span>权限范围</span>
        </div>
        <div nz-col [nzSpan]="18">
            <nz-select [nzAllowClear]="true" class="data-content" [(ngModel)]="selectedDataScope" (ngModelChange)="dataScopeChange($event)">
                <nz-option *ngFor="let dataScope of dataScopes" nzValue="{{dataScope.key}}" 
                nzLabel="{{dataScope.display}}">
                </nz-option>
            </nz-select>
        </div>
    </div>

    <div nz-row [nzGutter]="24" class="data-row">
        <div nz-col [nzSpan]="6" class="data-label">
            <span>数据权限</span>
        </div>
        <div nz-col [nzSpan]="18">
            <nz-content class="data-content perm-content">
            <nz-tree style="margin: 10px 10px 20px 10px;" #nzTreeComponent [nzData]="deptNodes" nzCheckable [nzCheckedKeys]="defaultCheckedKeys"
                [nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]="defaultSelectedKeys"
                (nzClick)="nzClick($event)" (nzContextMenu)="nzClick($event)" (nzCheckBoxChange)="nzCheck($event)"
                (nzExpandChange)="nzCheck($event)">
            </nz-tree>
        </nz-content>
        </div>
    </div>

    <div nz-row nzJustify="end">
        <nz-col>
            <button nz-button class="dialog-button" (click)="onAssign($event)" >设置</button>
            <button nz-button class="dialog-button" (click)="onCancel($event)" >取消</button>
        </nz-col>
    </div>
</div>